<template>
  <div class="ExtensionLinkDialog">
    <!-- 推广员链接   -->
    <el-dialog :visible.sync="linkVisible" title="推广员链接" :modal="false" class="extension-link" :before-close="handelClose" @close="handelClose">
      <div class="head" style="width:100%;display: flex;justify-content: start">
        <div class="left" style="width: 60px;height: 60px"> <el-image :src="require('@/assets/images/avator.png')" /></div>
        <div class="right" style="line-height: 60px"> {{ extensioner.name }} </div>
      </div>
      <div class="content" style="display: flex; justify-content: space-between">
        <div class="left-tab">
          <el-radio-group v-model="linkType">
            <el-col :span="24" class="link-tab">
              <el-radio-button label="wechat">微信</el-radio-button>
            </el-col>
            <el-col :span="24" class="link-tab">
              <el-radio-button label="alipay">支付宝</el-radio-button>
            </el-col>
          </el-radio-group>
        </div>
        <div class="right-code-content">
          <div v-if="linkType == 'wechat'">
            <div class="little-title">
              <p>小程序</p>
            </div>
            <div class="right-link-content">
              <div class="left-code">
                <el-card>
                  <el-row type="flex" justify="center">
                    <qr-code
                      :options="{
                        text: linkQrcode,
                        width: 120,
                        height: 120,
                      }"
                    />
                  </el-row>
                  <el-row type="flex" justify="center">
                    <el-button type="primary" @click="downLoad">下载小程序码</el-button>
                  </el-row>
                </el-card>
              </div>
              <div class="right-linkAddress">
                <el-col :span="24"><el-input v-model="extensioner.wechatLinkAddress" /></el-col>
                <el-col :span="24" type="flex" justify="end"> <el-button type="primary" @click="copyLink">复制链接</el-button></el-col>
              </div>
            </div>

          </div>

        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import QrCode from '@/components/QrCode'

export default {
  name: 'ExtensionLinkDialog',
  components: { QrCode },
  props: { linkVisible: { type: Boolean, default: false }},
  data() {
    return {
      extensioner: {
        avator: null,
        name: null,
        wechatCode: null,
        wechatLinkAddress: null,
        alipayCode: null,
        alipayLInkAddress: null
      },
      linkType: 'wechat',
      linkUrl: null,
      linkQrcode: null
    }
  },
  watch: {
    linkVisible(newValue, oldValue) {
      // this.dialogShow = newValue
    }
  },
  methods: {
    setData(row) {
      this.linkVisible = true
      this.linkUrl = row.agentId
      this.linkQrcode = 'https://qrc.ejiakanghu.cn/qrcode/saleman?uid=' + this.linkUrl
      this.extensioner.wechatLinkAddress = 'https://qrc.ejiakanghu.cn/qrcode/saleman?uid=' + row.agentId
      this.extensioner.name = row.nickname
    },
    downLoad() {
      const myCanvas = document.getElementsByTagName('canvas')[0]
      const a = document.createElement('a')
      a.href = myCanvas.toDataURL('image/png')
      a.download = '二维码'
      a.click()
      this.$message({
        message: '正在进行下载保存',
        type: 'success'
      })
    },
    copyLink() {
      const url = this.extensioner.wechatLinkAddress
      const oInput = document.createElement('input')
      oInput.value = url
      document.body.appendChild(oInput)
      oInput.select() // 选择对象;
      console.log(oInput.value)
      document.execCommand('Copy') // 执行浏览器复制命令
      this.$message({
        message: '复制成功',
        type: 'success'
      })
      oInput.remove()
    },
    handelClose() {
      this.$emit('handelClose')
      this.resetData()
    },
    resetData() {
      this.linkUrl = null
      this.linkQrcode = null
      this.extensioner.wechatLinkAddress = null
      this.extensioner.name = null
    }
  }
}
</script>

<style lang="scss" scoped>
.ExtensionLinkDialog {
  .extension-link {
    .content {
      margin-top: 20px;
      .left-tab {
        width: 150px;
        height: auto;
        background-color: #F5F7FA;
        padding-left: 5px;
        padding-top: 5px;
        .link-tab {
          margin-bottom: 10px;
          .el-radio-button {
            width: 140px;
            ::v-deep .el-radio-button__inner {
              width: 140px;
            }
          }
        }
      }
      .right-code-content {
        width: 750px;
        .little-title {
          width: 100%;
          height: 50px;
          background-color: #F5F7FA;
          p {
            line-height: 50px;
            color: #409EFF;
          }
        }
        .right-link-content {
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          .left-code {
            width: 220px;
          }
          .right-linkAddress {
            width: 500px;
          }
        }
      }
    }
  }
}
</style>
